<template>
	<view class="bg">
		<xl-navbar title="Dialog对话框" fixed shadow></xl-navbar>
		<xl-list-item title="基础样式" arrow @click="open(1)"></xl-list-item>
		<xl-list-item title="显示标题" arrow @click="open(2)"></xl-list-item>
		<xl-list-item title="只显示确认" arrow @click="open(3)"></xl-list-item>
		<xl-list-item title="宽度、边距、背景色" arrow @click="open(4)"></xl-list-item>
		<xl-list-item title="海报插槽，显示关闭" arrow @click="open(5)"></xl-list-item>
		<xl-list-item title="确认按钮小程序开放功能：获取手机号" arrow @click="open(6)"></xl-list-item>
		<xl-list-item title="确认按钮小程序开放功能：获取用户信息" arrow @click="open(7)"></xl-list-item>
		<xl-list-item title="不用组件,使用uni.$xl.showModal()" arrow @click="open(8)"></xl-list-item>
		
		
		<xl-dialog ref="dialog1"></xl-dialog>
		<xl-dialog ref="dialog2" title="标题"></xl-dialog>
		<xl-dialog ref="dialog3" title="标题" :showCancelButton="false"></xl-dialog>
		<xl-dialog ref="dialog4" title="标题" width="90%" padding="20" background="#f1f1f1"></xl-dialog>
		<xl-dialog ref="dialog5" padding="0" :showConfirm="false" showCloseButton background="transparent">
			<xl-image src="/static/imgs/pic.png" mode="scaleToFill" height="800" borderRadius="20"></xl-image>
		</xl-dialog>
		<xl-dialog ref="dialog6" title="标题" openType="getPhoneNumber" @getphonenumber="getPhoneNumber"></xl-dialog>
		<xl-dialog ref="dialog7" title="标题" openType="getUserInfo" @getuserinfo="getUserInfo"></xl-dialog>
	</view>
</template>

<script setup>
	import { ref, onMounted, computed } from "vue";
	
	const dialog1 = ref()
	const dialog2 = ref()
	const dialog3 = ref()
	const dialog4 = ref()
	const dialog5 = ref()
	const dialog6 = ref()
	const dialog7 = ref()
	const showConfirm = ref(false)
	
	function open(index){
		if(index == 1) dialog1.value.open("Dialog对话框")
		else if(index == 2)  dialog2.value.open("Dialog对话框")
		else if(index == 3)  dialog3.value.open("Dialog对话框")
		else if(index == 4)  dialog4.value.open("Dialog对话框")
		else if(index == 5)  dialog5.value.open()
		else if(index == 6)  dialog6.value.open("获取小程序手机号")
		else if(index == 7)  dialog7.value.open("获取小程序用户信息")
		else if(index == 8){
			uni.$xl.showModal({
				content: "Dialog对话框"
			}).then(()=>{
				console.log("确认");
			}).catch(()=>{
				console.log("取消");
			})
		}
	}
	
	function getPhoneNumber(e){
		console.log(e.detail.errMsg);
		if (e.detail.errMsg === 'getPhoneNumber:ok') {
			uni.showLoading({
				title: '正在登录···'
			});
			uni.$xl.apis.test().then((res)=>{
				uni.hideLoading();
				uni.$xl.toast("使用openId和code登录或注册："+e.detail.code, 3000);
			}).catch((err)=>{
				// 请求数据失败
				console.log(err)
				uni.hideLoading();
			})
		} else {
			uni.$xl.toast(e.detail.errMsg, 5000);
			console.log('获取手机号失败：', e.detail.errMsg);
		}
	}
	
	function getUserInfo(e){
		console.log(e.detail.errMsg);
		if (e.detail.errMsg === 'getUserInfo:ok') {
			console.log(e.detail.userInfo);
		} else {
			uni.$xl.toast(e.detail.errMsg, 5000);
			console.log('获取用户信息失败：', e.detail.errMsg);
		}
	}
</script>

